<!-- 客户打款维护 -->
<template>
  <div class="customer-maintenance">
    <!-- 查询 -->
    <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-select size="mini" filterable v-model="formData.customerId" @visible-change="selectStar" @change="getCustomerMoney(1, 15)">
            <el-option label="所有客户" value="-1"></el-option>
            <el-option v-for="item in userInfo" :key="item.ID" :label="item.search" :value="item.UserId"></el-option>
          </el-select>
          <el-form-item>
            <el-date-picker
              v-model="formData.startTime"
              class="time-small"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="formData.endTime"
              class="time-small"
              align="right"
              type="date"
              @change="getCustomerMoney(1, 15)"
              value-format="yyyy-MM-dd"
              placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-button type="primary" size="mini" @click="openDialog()">增加</el-button>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; justify-content: flex-end; height: 29px;">
            <el-form-item>
              <el-input v-model="formData.searchMent" clearable @keyup.enter.native="searchFinancial()"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="searchFinancial()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      border
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        align="center"
        label="用箱人">
        <template slot-scope="scope">
          {{scope.row.customerCompany}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="打款金额">
        <template slot-scope="scope">
          {{scope.row.money}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="打款日期">
        <template slot-scope="scope">
          {{scope.row.updateTime}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="备注">
        <template slot-scope="scope">
          {{scope.row.remark}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="图片">
        <template slot-scope="scope">
          <el-button v-if="scope.row.image" size="mini" icon="el-icon-picture" @click="openimg(scope.row.image)"></el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editMoneyMaintain(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="isSure(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="customer-maintenance-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[10, 15, 20]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="查看图片"
      :visible.sync="centerDialogVisible"
      width="500px"
      center>
      <div class="myimage">
        <img class="imgs" :src="imgurl">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 增加打款记录 -->
    <increase-record-dialog :userInfo="userInfo" :uploadimgData="uploadData"></increase-record-dialog>
    <!--  -->
    <modify-payment-dialog :uploadimgData="upload" :edit="edit"></modify-payment-dialog>
  </div>
</template>

<script>
import {
  deleteMoneyMaintain,
  moneyMaintainList
} from './api/finance'
import {
  SearchUserInfo
} from '../cpInfoMan/api/customerManagement'
import util from '@util'
import IncreaseRecordDialog from './dialog/IncreaseRecordDialog'
import ModifyPaymentDialog from './dialog/ModifyPaymentDialog'
export default {
  components: {
    IncreaseRecordDialog,
    ModifyPaymentDialog
  },
  data () {
    return {
      tableData: [],
      formData: {
        customerId: '-1',
        startTime: '',
        endTime: '',
        searchMent: ''
      },
      edit: '',
      imgurl: '',
      uploadData: {},
      upload: '',
      loading: true,
      centerDialogVisible: false,
      pageNo: 1,
      number: 10,
      total: 0,
      userInfo: [] // 客户列表
    }
  },
  mounted () {
    const user = util.getItem('$user_fx')
    Object.assign(this.uploadData, {
      un: user.un,
      rtk: user.rtk,
      uid: user.uid,
      image: ''
    })
    this.SearchUserInfo()
    this.getCustomerMoney(1, 15)
  },
  methods: {
    // 获取客户信息
    async SearchUserInfo () {
      const res = await SearchUserInfo({
        page: 1,
        num: 10000
      })
      if (res.status === 200) {
        this.userInfo = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    isSure (row) {
      this.$confirm(' 是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteMoneyMaintain(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
        return false
      })
    },
    // 删除付款维护
    async deleteMoneyMaintain (row) {
      const res = await deleteMoneyMaintain({
        maintainId: row.maintainId
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.getCustomerMoney(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取客户打款
    async getCustomerMoney (pg, nb) {
      this.loading = true
      const res = await moneyMaintainList({
        clientId: this.formData.customerId,
        startTime: this.formData.startTime || '',
        endTime: this.formData.endTime || '',
        page: pg, // 页数
        num: nb // 条数
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.dataCount || 0
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    openimg (e) {
      this.imgurl = e
      this.centerDialogVisible = true
    },
    handleCurrentChange (val) {
      this.getCustomerMoney(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getCustomerMoney(this.pageNo, val)
      this.number = val
    },
    // 弹窗
    openDialog () {
      this.SearchUserInfo()
      this.$store.commit('show_increase_record_dialog')
    },
    // 修改
    editMoneyMaintain (row) {
      this.edit = JSON.stringify(row)
      this.upload = JSON.stringify(this.uploadData)
      this.$store.commit('show_modify_payment_dialog')
    },
    selectStar (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.SearchUserInfo()
        }, 500)
      }
    },
    // 搜索
    searchFinancial () {
      let search = this.formData.searchMent.toLowerCase()
      let arr = []
      if (search === '') {
        this.getCustomerMoney(1, 15)
        return false
      }
      this.tableData.map(item => {
        for (let key in item) {
          if (item[key].toLowerCase().indexOf(search) !== -1) {
            arr.push(item)
          }
        }
      })
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      this.tableData = arr
    }
  }
}
</script>

<style lang="less">
 .customer-maintenance-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
  .myimage {
    width:400px;
    margin: 0 auto;
    .imgs {
      width: 100%;
    }
  }
</style>
